<template>
  <headerTop :name="'目标水声特征等数据库'">
    <template v-slot:menu>
      <div class="header_left">
        <menu-item
          :class="['left_item', actPath === item.linkTo && 'act']"
          v-for="item in routeNav"
          :key="item.id"
          @click="goLinkFn(item.linkTo)"
          :name="item.name"
        >
        </menu-item>
      </div>
    </template>
  </headerTop>
</template>
<script>
import headerTop from "@/components/headerTop.vue";
import menuItem from "@/components/menuItem.vue";
export default {
  name: "topHeader",
  components: {
    headerTop,
    menuItem,
  },
  data() {
    return {
      routeNav: [
        {
          id: "1",
          name: "仪表盘",
          linkTo: "yibiaopan",
        },
        {
          id: "2",
          name: "元数据标准",
          linkTo: "yuanshujuzidian",
        },
        {
          id: "3",
          name: "数据库",
          linkTo: "shujuku",
        },
      ],
      actPath: "",
    };
  },
  watch: {
    $route: {
      // 深度观察监听
      deep: true,
      immediate: true,
      handler: function (val) {
        this.actPath = val?.name;
      },
    },
  },
  methods: {
    goback() {
      this.$router.push({ path: "/" });
    },
    cliear() {
      this.$confirm("是否清空所有数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.clearTempDataAndFile().then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "清空成功",
                type: "success",
              });
              this.$emit("clearData");
            }
          });
        })
        .catch(() => {});
    },
    goLinkFn(url) {
      this.$router.push({ path: url });
    },
  },
};
</script>
<style scoped lang="scss">
.header_left {
  display: flex;
}
</style>
